import { message, Popover, Spin } from "antd";
import React, {
    useEffect,
    useLayoutEffect,
    useCallback,
    useState,
    useMemo
} from "react";
import { connect, useDispatch } from "react-redux";
import { LgSelect, LgPaginationA, LgSwitch, LgPopLayer, LgCheckbox } from "lancoo-web-ui";
import axiosMethod from "../../util/axios";
import "./index.scss";
import moment from "moment";
import Empty from "../../common/component/empty";
import Search from "../../common/component/search";
import BtnAlert from "../../common/component/btnAlert";
import $ from "jquery";
import TableList from "../../common/component/fileList";
import BackupsHistory from "../sideBar/drawer/backupsHistory";
import SettingDrawer from "./settingDrawer";
import Scrollbars from "react-custom-scrollbars";
import { getQueryVariable } from "../../util";

const pageNum = 10;
const historyNum = 100;

function BackupsReduction(props){
    let {
        userInfo,
        alertInfo,
        sysAddrInfo
    } = props;
    const dispatch = useDispatch();
    const [loadVisible, setLoadVisible] = useState(false);
    const [currentUser, setCurrentUser] = useState({
        text: "全部应用",
        info: ""
    });
    const [currentKind, setCurrentKind] = useState({
        text: "全部分类",
        info: ""
    });
    const [total, setTotal] = useState(0);
    const [moduleList, setModuleList] = useState([]);
    const [keyword, setKeyword] = useState("");
    const [pageIndex, setPageIndex] = useState(1);

    const [backVisible, setBackVisible] = useState(false);
    const [backData, setBackData] = useState({});
    const [editBackData, setEditBackData] = useState({});
    const [dev, setDev] = useState(false);
    const [devData, setDevData] = useState([]);
    const [selectList, setSelectList] = useState([]);

    const [autoBackInfo, setAutoBackInfo] = useState({});
    const [curProduct, setCurProduct] = useState({});
    const [productList, setProductList] = useState([]);

    const changeUser = (data) => {
        if(pageIndex !== 1){
            setPageIndex(1);
        }
        setCurrentUser(data);
    }
    const changeProduct = (data) => {
        if(pageIndex !== 1){
            setPageIndex(1);
        }
        setCurProduct(data);
    }

    const getModuleList = useCallback(()=>{
        setLoadVisible(true);
        axiosMethod({
            type: "get",
            baseUrl: sysAddrInfo["491"]?.webSvrAddr,
            url: "api/backupRestore/backup/recorde/listV2",
            noCheck: true,
            body: {
                eduId: userInfo.eduId,
                keyword,
                productId: curProduct.info||"",
                pageSize: pageNum,
                pageNum: pageIndex
            },
            callback: function(res, info){
                setLoadVisible(false);
                if(!res || info.code !== "200"){
                    return;
                }
                setTotal(info.total);
                setModuleList(res);
            }
        });
    }, [userInfo, curProduct, pageIndex, keyword]);

    const getDevData = useCallback(()=>{
        axiosMethod({
            type: "get",
            url: "api/backupRestore/backup/recorde/byRestoreAll",
            noCheck: true,
            body: {
                eduId: userInfo.eduId
            },
            callback: function(res, info){
                if(!res || info.code !== "200"){
                    return;
                }
                setDevData(res);
            }
        });
    }, [userInfo]);

    const backupAll = useCallback(()=>{
        // setLoadVisible(true);
        axiosMethod({
            type: "post",
            url: "api/backupRestore/backup/all",
            noCheck: true,
            body: {
                eduId: userInfo.eduId,
            },
            timeout: 6000000000,
            header: {
                "Content-type": "application/x-www-form-urlencoded"
            },
            callback: function(res, info){
                // setLoadVisible(false);
                if(!res || info.code !== "200"){
                    return;
                }
                message.success("备份成功");
                getModuleList();
            }
        });
    }, [userInfo, getModuleList]);

    const backupMutiple = useCallback(()=>{
        // setLoadVisible(true);
        if(!selectList.length){
            message.warn("请选择要备份的应用/模块");
            return;
        }
        setLoadVisible(true);
        axiosMethod({
            type: "post",
            url: "api/backupRestore/backup/all",
            noCheck: true,
            body: {
                eduId: userInfo.eduId,
                sysIds: selectList.join(",")
            },
            timeout: 6000000000,
            header: {
                "Content-type": "application/x-www-form-urlencoded"
            },
            callback: function(res, info){
                setLoadVisible(false);
                if(!res || info.code !== "200"){
                    return;
                }
                message.success("备份成功");
                getModuleList();
            }
        });
    }, [userInfo, selectList, getModuleList]);

    const recallToTime = useCallback((data)=>{
        axiosMethod({
            type: "post",
            url: "api/backupRestore/restore/all/backupUniqueId",
            noCheck: true,
            body: {
                eduId: userInfo.eduId,
                userId: userInfo.userId,
                backupUniqueId: data.backupUniqueId
            },
            header: {
                "Content-type": "application/x-www-form-urlencoded"
            },
            callback: function(res, info){
                if(!res || info.code !== "200"){
                    return;
                }
                message.success("还原成功");
            }
        });
    }, [userInfo]);

    const cancelBack = () => {
        setEditBackData({});
        setBackVisible(false);
    }

    const getProductList = useCallback(()=>{
        axiosMethod({
            type: "get",
            url: "api/backupRestore/backup/recorde/getProductList",
            noCheck: true,
            body: {
                schoolLevel: userInfo.schoolLevel
            },
            callback: function(res, info){
                if(!res || info.code !== "200"){
                    return;
                }
                res.unshift({
                    productId: "",
                    productName: "全部"
                })
                setCurProduct({
                    info: "",
                    text: "全部"
                })
                setProductList(res);
            }
        });
    }, [userInfo]);

    const getBackData = useCallback(()=>{
        axiosMethod({
            type: "get",
            url: "api/backupRestore/scheduleTask/getScheduleTask",
            noCheck: true,
            body: {
                taskMethod: 'backUpDatabaseJob'
            },
            callback: function(res, info){
                if(!res || info.code !== "200"){
                    return;
                }
                setBackData(res);
                setEditBackData(res);
            }
        });
    }, []);

    const getAutoBackInfo = useCallback(()=>{
        axiosMethod({
            type: "get",
            url: "api/backupRestore/backup/recorde/getAutoBackup/statistics",
            body: {
                eduId: userInfo.eduId
            },
            callback: function(res, info){
                if(!res || info.code !== "200"){
                    return;
                }
                setAutoBackInfo(res);
            }
        });
    }, [userInfo]);


    const operateBackData = useCallback((key, value)=>{
        let info = {...editBackData};
        if(key === "frequencyType"){
            if(!/^[\d]*$/ig.test(value)){
                return;
            }
            if(value > 90){
                value = 90;
            }
        }
        info[key] = value;
        setEditBackData(info);
    }, [editBackData]);

    const sendBackData = useCallback(()=>{
        if(!editBackData.frequency || editBackData.frequency == 0){
            message.warn("备份频率不能间隔为0");
            return;
        }
        axiosMethod({
            type: "post",
            url: "api/backupRestore/scheduleTask/updateTask",
            noCheck: true,
            body: {
                taskId: editBackData.taskId,
                interval: editBackData.frequency,
                taskType: 2
            },
            callback: function(res, info){
                if(info.code === "200"){
                    message.success("更新成功");
                    cancelBack();
                    getBackData();
                }
            }
        });
        axiosMethod({
            type: "post",
            url: "api/backupRestore/scheduleTask/updateTaskTurnBo",
            noCheck: true,
            body: {
                taskId: editBackData.taskId,
                taskMethod: "backUpDatabaseJob",
                status: editBackData.beTurn? 1: 0
            },
            callback: function(res, info){
                if(info.code === "200"){
                }
            }
        });
    }, [editBackData]);

    const getHistory = useCallback((data, e)=>{
        e.stopPropagation();
        // setLoadVisible(true);
        // axiosMethod({
        //     type: "get",
        //     url: "api/backupRestore/backup/recorde/bySys/info",
        //     noCheck: true,
        //     body: {
        //         schoolId: userInfo.schoolId,
        //         sysId: data.sysId,
        //         pageSize: historyNum,
        //     },
        //     callback: function(res, info){
        //         setLoadVisible(false);
        //         if(!res || info.code !== "200"){
                //     dispatch({
                //         type: "SET_BACKUPSHISTORYINFO",
                //         data: {
                //             visible: true,
                //             data: []
                //         }
                //     })
                //     return;
                // }
                dispatch({
                    type: "SET_BACKUPSHISTORYINFO",
                    data: {
                        visible: true,
                        data: data
                    }
                })
        //     }
        // });
    }, [dispatch]);

    const goBackups = useCallback((data, e)=>{
        e.stopPropagation();
        setLoadVisible(true);
        axiosMethod({
            type: "post",
            baseUrl: sysAddrInfo["491"]?.webSvrAddr,
            url: "api/backupRestore/backup/single",
            noCheck: true,
            timeout: 6000000000,
            body: {
                eduId: userInfo.eduId,
                sysId: data.sysId,
            },
            header: {
                "Content-type": "multipart/form-data"
            },
            callback: function(res, info){
                setLoadVisible(false);
                if(info.code !== "200"){
                    return;
                }
                message.success("备份成功");
                getModuleList();
            }
        });
    }, [userInfo]);

    const changeChild = (e) => {
        let node = "";
        let svg = "";
        if($(e.target).attr("class") === "table-tr"){
            node = $(e.target).children('.data-table-child');
            svg = $(e.target).find('.table-td.index svg');
        } else {
            let parent = $(e.target).parents(".table-tr");
            node = parent.children('.data-table-child');
            svg = parent.find('.table-td.index svg');
        }
        if(node.css("display") === "none"){
            svg.css("transform", "rotate(90deg)");
            node.css("display", "block");
        } else {
            svg.css("transform", "");
            node.css("display", "none");
        }
    }

    const selectAll = (check) => {
        console.log(check);
        let selectIds = [...selectList];
        let list = moduleList.map(item=>item.sysId);
        let arr = [];
        if(check){
            arr = [...selectIds, ...list];
        } else {

        }
        setSelectList(arr);
    }

    const changeLoad = (value) => {
        setLoadVisible(value);
    }

    const ModuleListDom = useMemo(()=>{
        let list = JSON.parse(JSON.stringify(moduleList));
        let selectIds = [...selectList];
        let dom = [];
        list.forEach((item, index)=>{
            let exist = selectList.includes(item.sysId);
            dom.push(
                <div className="table-tr" key={index} onClick={changeChild}>
                    <div className="table-td index" style={{width: "110px"}}>
                        <LgCheckbox checked={exist} onChange={()=>setSelectList(exist? selectIds.filter(child=>child!==item.sysId): [...selectIds, item.sysId])} />
                        {(pageIndex-1)*pageNum+index+1}
                    </div>
                    <div className="table-td noHidden" style={{width: "calc(25% - 110px)"}}>
                        <div className="table-update-title" key={index}>
                            <span className="module-icon" style={{
                                backgroundImage: `url('${item.sysLogoUrl}')`
                            }}></span>
                            <p className="module-title" title={item.sysName}>{item.sysName}</p>
                        </div>
                    </div>
                    <div className="table-td" style={{width: "16%", color: "#999"}} title={item.productName? item.productName: "/"}>
                        {item.productName? item.productName: "/"}
                    </div>
                    <div className="table-td" style={{width: "14%", textAlign: "center", color: "#999"}} title={item.backupTime? moment(item.backupTime).format("YYYY-MM-DD HH:mm"): "暂无备份"}>
                        {item.backupTime? moment(item.backupTime).format("YYYY-MM-DD HH:mm"): "/"}
                    </div>
                    <div className="table-td" style={{width: "10%", color: item.backupLogotype === "1"? "#ff6600": ""}}>
                        {item.backupLogotype === "1"? "主动备份": item.backupLogotype === "2"? "自动备份": "/"}
                    </div>
                    <div className="table-td" style={{width: "24%", color: item.beBackupError === "1"? "#ff0000": "#999", padding: "0 48px 0 0"}} title={item.beBackupError === "1"? "备份失败，请联系管理员": item.backupFilePath? item.backupFilePath: "/"}>
                        {item.beBackupError === "1"? "备份失败，请联系管理员": item.backupFilePath? item.backupFilePath: "/"}
                    </div>
                    <div className="table-td" style={{width: "11%"}}>
                        <div className="table-btn-group">
                            <span className="blue-btn" onClick={(e)=>goBackups(item, e)}>主动备份</span>
                            <span className="blue-btn" onClick={(e)=>getHistory(item, e)}>备份记录</span>
                        </div>
                    </div>
                </div>
            )
        })
        return (
            <div className="data-table">
                <div className="table-thead">
                    <div className="table-th" style={{width: "110px"}}></div>
                    <div className="table-th" style={{width: "calc(25% - 110px)"}}>应用/模块名称</div>
                    <div className="table-th" style={{width: "16%"}}>所属系统</div>
                    <div className="table-th" style={{width: "14%", textAlign: "center"}}>最近备份时间</div>
                    <div className="table-th" style={{width: "10%"}}>最近备份方式</div>
                    <div className="table-th" style={{width: "24%", padding: "0 48px 0 0"}}>备份文件路径</div>
                    <div className="table-th" style={{width: "11%"}}>操作</div>
                </div>
                {
                    dom.length? 
                    dom:
                    <Empty
                    // className={"list-empty"}
                    style={{margin: "100px 0"}}
                    text={keyword? "暂无搜索结果": "暂无内容"}
                    ></Empty>
                }
            </div>
        )
    }, [keyword, moduleList, selectList, pageIndex, dispatch]);

    useEffect(()=>{
        if(curProduct.text){
            getModuleList();
        } else {
            getBackData();
            getAutoBackInfo();
            getProductList();
        }
    }, [curProduct, getModuleList, getBackData, getAutoBackInfo, getProductList]);

    useEffect(()=>{
        if(getQueryVariable("use") === "devOps"){
            setDev(true);
            getDevData();
        } else {
            setDev(false);
        }
        window._changeLoad = changeLoad
    }, []);
    console.log(productList, 'product')
    return (
        <>
         <Spin wrapperClassName="page-load" spinning={loadVisible} tip="数据加载中，请稍候...">
        <div className="backups-reduction-page">
            <Scrollbars>
            <div className="page-top-option">
                <div>
                    {/* {/* <LgSelect
                    datalist={[
                        {
                            text: "全部应用类型",
                            info: ""
                        },
                        {
                            text: "网页",
                            info: "1"
                        },
                        {
                            text: "客户端",
                            info: "2"
                        },
                        {
                            text: "App",
                            info: "3"
                        },
                        {
                            text: "小程序",
                            info: "4"
                        },
                        {
                            text: "独立小程序",
                            info: "5"
                        }
                    ]}
                    SelectOption={changeKind}
                    value={currentKind.text}
                    size={"normal"}
                    ></LgSelect> */}
                    <LgSelect
                    className="type-select"
                    datalist={
                        productList.map(item=>({
                            text: <span title={item.productName}>{item.productName}</span>,
                            info: item.productId
                        }))
                    }
                    SelectOption={changeProduct}
                    value={curProduct.text}
                    size={"normal"}
                    ></LgSelect>
                    <span className="list-num">共<span>{total}</span>个应用</span>
                </div>
                <div className="top-option-right">
                    <span className="top-option-right-info">
                        最近一份自动备份:&nbsp;{autoBackInfo.recentlyBackupTime||"暂无备份记录~"}
                        <span>&nbsp;(成功:<span style={{color: "#009900"}}>{autoBackInfo.backupSuccessNum}</span>/失败:<span style={{color: "#ff0000"}}>{autoBackInfo.backupFailNum}</span>)</span>
                    </span>
                    <span className="slice-line"></span>
                    <Search placeholder="搜索应用/模块名称..." searchMethod={(value)=>{
                        let node = $(".table-tr").children('.data-table-child');
                        let svg = $(".table-tr").find('.table-td.index svg');
                        svg.css("transform", "");
                        node.css("display", "none");
                        if(pageIndex !== 1){
                            setPageIndex(1);
                        }
                        setKeyword(value)
                    }} />
                    {
                        dev?
                        <>
                        <div className="back-data-btn" onClick={backupAll}>
                            <svg xmlns="http://www.w3.org/2000/svg" width="17" height="16" viewBox="0 0 17 16">
                            <path id="路径_4659" data-name="路径 4659" d="M16.825,6.348c-.1-.523-.42-.861-.817-.861h-.086a2.079,2.079,0,0,1-2.081-2.072,2.354,2.354,0,0,1,.181-.79,1.085,1.085,0,0,0-.368-1.315l-.025-.018L11.521.126,11.494.114a1.117,1.117,0,0,0-.447-.09,1.21,1.21,0,0,0-.858.349,3.048,3.048,0,0,1-1.643.917A3.055,3.055,0,0,1,6.892.355,1.21,1.21,0,0,0,6.027,0a1.115,1.115,0,0,0-.439.086L5.561.1,3.378,1.292l-.026.018a1.083,1.083,0,0,0-.37,1.314,2.334,2.334,0,0,1,.182.791A2.079,2.079,0,0,1,1.083,5.488H1c-.4,0-.717.338-.816.861A10.723,10.723,0,0,0,0,8.007,10.72,10.72,0,0,0,.18,9.665c.1.523.42.861.816.861h.086A2.079,2.079,0,0,1,3.163,12.6a2.349,2.349,0,0,1-.181.79A1.086,1.086,0,0,0,3.349,14.7l.025.017,2.069,1.152.026.012a1.1,1.1,0,0,0,.446.09,1.19,1.19,0,0,0,.864-.364,3.047,3.047,0,0,1,1.68-.975,3.073,3.073,0,0,1,1.691.994,1.189,1.189,0,0,0,.87.37h0a1.1,1.1,0,0,0,.438-.087l.027-.012,2.144-1.18.025-.018a1.084,1.084,0,0,0,.369-1.313,2.376,2.376,0,0,1-.182-.792,2.079,2.079,0,0,1,2.081-2.072h.085c.4,0,.718-.338.818-.86A10.626,10.626,0,0,0,17,8.007,10.68,10.68,0,0,0,16.825,6.348Zm-10.9,8.43L4.116,13.77A3.431,3.431,0,0,0,4.358,12.6,3.266,3.266,0,0,0,1.336,9.345,9.008,9.008,0,0,1,1.2,8.007a9.027,9.027,0,0,1,.139-1.339A3.266,3.266,0,0,0,4.358,3.415a3.43,3.43,0,0,0-.241-1.17L6.042,1.192h0a5.741,5.741,0,0,0,.731.617,3.128,3.128,0,0,0,1.773.67,3.13,3.13,0,0,0,1.759-.657,5.714,5.714,0,0,0,.727-.605h0l1.856,1.027a3.432,3.432,0,0,0-.242,1.171,3.266,3.266,0,0,0,3.022,3.253,9.054,9.054,0,0,1,.139,1.339,9.018,9.018,0,0,1-.139,1.339A3.266,3.266,0,0,0,12.647,12.6a3.429,3.429,0,0,0,.242,1.171L11.009,14.8a5.827,5.827,0,0,0-.733-.645,3.121,3.121,0,0,0-1.817-.712,3.124,3.124,0,0,0-1.8.7A5.874,5.874,0,0,0,5.925,14.778ZM11.476,8a3.011,3.011,0,1,0-3.011,3A3.008,3.008,0,0,0,11.476,8ZM8.465,6.187A1.809,1.809,0,1,1,6.649,8,1.815,1.815,0,0,1,8.465,6.187Z" transform="translate(-0.002 0)" fill="#fff"/>
                            </svg>
                            备份全部
                        </div>
                        <Popover content={
                            <div className="recall-time-list">
                                {
                                    devData.map((item, index)=>(
                                        <div className="recall-time-one" key={index} onClick={()=>recallToTime(item)}>
                                            {item.backupUniqueDate}
                                        </div>
                                    ))
                                }
                            </div>
                        }>
                        <div className="recall-all-btn" onClick={()=>setBackVisible(true)}>
                            <svg xmlns="http://www.w3.org/2000/svg" width="17" height="16" viewBox="0 0 17 16">
                            <path id="路径_4659" data-name="路径 4659" d="M16.825,6.348c-.1-.523-.42-.861-.817-.861h-.086a2.079,2.079,0,0,1-2.081-2.072,2.354,2.354,0,0,1,.181-.79,1.085,1.085,0,0,0-.368-1.315l-.025-.018L11.521.126,11.494.114a1.117,1.117,0,0,0-.447-.09,1.21,1.21,0,0,0-.858.349,3.048,3.048,0,0,1-1.643.917A3.055,3.055,0,0,1,6.892.355,1.21,1.21,0,0,0,6.027,0a1.115,1.115,0,0,0-.439.086L5.561.1,3.378,1.292l-.026.018a1.083,1.083,0,0,0-.37,1.314,2.334,2.334,0,0,1,.182.791A2.079,2.079,0,0,1,1.083,5.488H1c-.4,0-.717.338-.816.861A10.723,10.723,0,0,0,0,8.007,10.72,10.72,0,0,0,.18,9.665c.1.523.42.861.816.861h.086A2.079,2.079,0,0,1,3.163,12.6a2.349,2.349,0,0,1-.181.79A1.086,1.086,0,0,0,3.349,14.7l.025.017,2.069,1.152.026.012a1.1,1.1,0,0,0,.446.09,1.19,1.19,0,0,0,.864-.364,3.047,3.047,0,0,1,1.68-.975,3.073,3.073,0,0,1,1.691.994,1.189,1.189,0,0,0,.87.37h0a1.1,1.1,0,0,0,.438-.087l.027-.012,2.144-1.18.025-.018a1.084,1.084,0,0,0,.369-1.313,2.376,2.376,0,0,1-.182-.792,2.079,2.079,0,0,1,2.081-2.072h.085c.4,0,.718-.338.818-.86A10.626,10.626,0,0,0,17,8.007,10.68,10.68,0,0,0,16.825,6.348Zm-10.9,8.43L4.116,13.77A3.431,3.431,0,0,0,4.358,12.6,3.266,3.266,0,0,0,1.336,9.345,9.008,9.008,0,0,1,1.2,8.007a9.027,9.027,0,0,1,.139-1.339A3.266,3.266,0,0,0,4.358,3.415a3.43,3.43,0,0,0-.241-1.17L6.042,1.192h0a5.741,5.741,0,0,0,.731.617,3.128,3.128,0,0,0,1.773.67,3.13,3.13,0,0,0,1.759-.657,5.714,5.714,0,0,0,.727-.605h0l1.856,1.027a3.432,3.432,0,0,0-.242,1.171,3.266,3.266,0,0,0,3.022,3.253,9.054,9.054,0,0,1,.139,1.339,9.018,9.018,0,0,1-.139,1.339A3.266,3.266,0,0,0,12.647,12.6a3.429,3.429,0,0,0,.242,1.171L11.009,14.8a5.827,5.827,0,0,0-.733-.645,3.121,3.121,0,0,0-1.817-.712,3.124,3.124,0,0,0-1.8.7A5.874,5.874,0,0,0,5.925,14.778ZM11.476,8a3.011,3.011,0,1,0-3.011,3A3.008,3.008,0,0,0,11.476,8ZM8.465,6.187A1.809,1.809,0,1,1,6.649,8,1.815,1.815,0,0,1,8.465,6.187Z" transform="translate(-0.002 0)" fill="#fff"/>
                            </svg>
                            还原全部
                        </div>
                        </Popover>
                        <div className="back-data-btn" onClick={()=>setBackVisible(true)}>
                            <svg xmlns="http://www.w3.org/2000/svg" width="17" height="16" viewBox="0 0 17 16">
                            <path id="路径_4659" data-name="路径 4659" d="M16.825,6.348c-.1-.523-.42-.861-.817-.861h-.086a2.079,2.079,0,0,1-2.081-2.072,2.354,2.354,0,0,1,.181-.79,1.085,1.085,0,0,0-.368-1.315l-.025-.018L11.521.126,11.494.114a1.117,1.117,0,0,0-.447-.09,1.21,1.21,0,0,0-.858.349,3.048,3.048,0,0,1-1.643.917A3.055,3.055,0,0,1,6.892.355,1.21,1.21,0,0,0,6.027,0a1.115,1.115,0,0,0-.439.086L5.561.1,3.378,1.292l-.026.018a1.083,1.083,0,0,0-.37,1.314,2.334,2.334,0,0,1,.182.791A2.079,2.079,0,0,1,1.083,5.488H1c-.4,0-.717.338-.816.861A10.723,10.723,0,0,0,0,8.007,10.72,10.72,0,0,0,.18,9.665c.1.523.42.861.816.861h.086A2.079,2.079,0,0,1,3.163,12.6a2.349,2.349,0,0,1-.181.79A1.086,1.086,0,0,0,3.349,14.7l.025.017,2.069,1.152.026.012a1.1,1.1,0,0,0,.446.09,1.19,1.19,0,0,0,.864-.364,3.047,3.047,0,0,1,1.68-.975,3.073,3.073,0,0,1,1.691.994,1.189,1.189,0,0,0,.87.37h0a1.1,1.1,0,0,0,.438-.087l.027-.012,2.144-1.18.025-.018a1.084,1.084,0,0,0,.369-1.313,2.376,2.376,0,0,1-.182-.792,2.079,2.079,0,0,1,2.081-2.072h.085c.4,0,.718-.338.818-.86A10.626,10.626,0,0,0,17,8.007,10.68,10.68,0,0,0,16.825,6.348Zm-10.9,8.43L4.116,13.77A3.431,3.431,0,0,0,4.358,12.6,3.266,3.266,0,0,0,1.336,9.345,9.008,9.008,0,0,1,1.2,8.007a9.027,9.027,0,0,1,.139-1.339A3.266,3.266,0,0,0,4.358,3.415a3.43,3.43,0,0,0-.241-1.17L6.042,1.192h0a5.741,5.741,0,0,0,.731.617,3.128,3.128,0,0,0,1.773.67,3.13,3.13,0,0,0,1.759-.657,5.714,5.714,0,0,0,.727-.605h0l1.856,1.027a3.432,3.432,0,0,0-.242,1.171,3.266,3.266,0,0,0,3.022,3.253,9.054,9.054,0,0,1,.139,1.339,9.018,9.018,0,0,1-.139,1.339A3.266,3.266,0,0,0,12.647,12.6a3.429,3.429,0,0,0,.242,1.171L11.009,14.8a5.827,5.827,0,0,0-.733-.645,3.121,3.121,0,0,0-1.817-.712,3.124,3.124,0,0,0-1.8.7A5.874,5.874,0,0,0,5.925,14.778ZM11.476,8a3.011,3.011,0,1,0-3.011,3A3.008,3.008,0,0,0,11.476,8ZM8.465,6.187A1.809,1.809,0,1,1,6.649,8,1.815,1.815,0,0,1,8.465,6.187Z" transform="translate(-0.002 0)" fill="#fff"/>
                            </svg>
                            备份设置
                        </div>
                        </>:
                        <div className="back-data-btn" onClick={()=>setBackVisible(true)}>
                            <svg xmlns="http://www.w3.org/2000/svg" width="17" height="16" viewBox="0 0 17 16">
                            <path id="路径_4659" data-name="路径 4659" d="M16.825,6.348c-.1-.523-.42-.861-.817-.861h-.086a2.079,2.079,0,0,1-2.081-2.072,2.354,2.354,0,0,1,.181-.79,1.085,1.085,0,0,0-.368-1.315l-.025-.018L11.521.126,11.494.114a1.117,1.117,0,0,0-.447-.09,1.21,1.21,0,0,0-.858.349,3.048,3.048,0,0,1-1.643.917A3.055,3.055,0,0,1,6.892.355,1.21,1.21,0,0,0,6.027,0a1.115,1.115,0,0,0-.439.086L5.561.1,3.378,1.292l-.026.018a1.083,1.083,0,0,0-.37,1.314,2.334,2.334,0,0,1,.182.791A2.079,2.079,0,0,1,1.083,5.488H1c-.4,0-.717.338-.816.861A10.723,10.723,0,0,0,0,8.007,10.72,10.72,0,0,0,.18,9.665c.1.523.42.861.816.861h.086A2.079,2.079,0,0,1,3.163,12.6a2.349,2.349,0,0,1-.181.79A1.086,1.086,0,0,0,3.349,14.7l.025.017,2.069,1.152.026.012a1.1,1.1,0,0,0,.446.09,1.19,1.19,0,0,0,.864-.364,3.047,3.047,0,0,1,1.68-.975,3.073,3.073,0,0,1,1.691.994,1.189,1.189,0,0,0,.87.37h0a1.1,1.1,0,0,0,.438-.087l.027-.012,2.144-1.18.025-.018a1.084,1.084,0,0,0,.369-1.313,2.376,2.376,0,0,1-.182-.792,2.079,2.079,0,0,1,2.081-2.072h.085c.4,0,.718-.338.818-.86A10.626,10.626,0,0,0,17,8.007,10.68,10.68,0,0,0,16.825,6.348Zm-10.9,8.43L4.116,13.77A3.431,3.431,0,0,0,4.358,12.6,3.266,3.266,0,0,0,1.336,9.345,9.008,9.008,0,0,1,1.2,8.007a9.027,9.027,0,0,1,.139-1.339A3.266,3.266,0,0,0,4.358,3.415a3.43,3.43,0,0,0-.241-1.17L6.042,1.192h0a5.741,5.741,0,0,0,.731.617,3.128,3.128,0,0,0,1.773.67,3.13,3.13,0,0,0,1.759-.657,5.714,5.714,0,0,0,.727-.605h0l1.856,1.027a3.432,3.432,0,0,0-.242,1.171,3.266,3.266,0,0,0,3.022,3.253,9.054,9.054,0,0,1,.139,1.339,9.018,9.018,0,0,1-.139,1.339A3.266,3.266,0,0,0,12.647,12.6a3.429,3.429,0,0,0,.242,1.171L11.009,14.8a5.827,5.827,0,0,0-.733-.645,3.121,3.121,0,0,0-1.817-.712,3.124,3.124,0,0,0-1.8.7A5.874,5.874,0,0,0,5.925,14.778ZM11.476,8a3.011,3.011,0,1,0-3.011,3A3.008,3.008,0,0,0,11.476,8ZM8.465,6.187A1.809,1.809,0,1,1,6.649,8,1.815,1.815,0,0,1,8.465,6.187Z" transform="translate(-0.002 0)" fill="#fff"/>
                            </svg>
                            备份设置
                        </div>
                    }
                    
                </div>
                
            </div>
            {ModuleListDom}
            <div className="menu_pagination">
            <div className="mutiple-handle">
                <LgCheckbox 
                checked={selectList.length===moduleList.length? true: false} 
                indeterminate={selectList.length && selectList.length !== moduleList.length? true: false} 
                onChange={selectAll}
                label="全选" />
                <div className="mutiple-btn" onClick={backupMutiple}>批量主动备份</div>
            </div>
            {
                total > pageNum?
                <LgPaginationA
                total={Math.ceil(total/pageNum)}
                size="normal"
                currentPage={pageIndex}
                onChangePage={(value)=>{
                    setSelectList([]);
                    setPageIndex(value);
                }}
                errorPage={() => {}}
                ></LgPaginationA>:
                ""
            }
            </div>
            </Scrollbars>
        </div>
        <BackupsHistory />
        
        <BtnAlert 
        visible={alertInfo.visible} 
        title={alertInfo.title} 
        smallTitle={alertInfo.smallTitle}
        onOk={alertInfo.onOk}
        onCancel={alertInfo.onCancel} />

        <SettingDrawer visible={backVisible} changeVisible={cancelBack} />

        {/* <HistoryDrawer visible={historyVisible} changeVisible={cancelHistory} /> */}

        {/* <LgPopLayer
            isCoverLayerClickClose={false}
            title="备份机制"
            className="back-poplayer"
            isOpen={backVisible}
            width={407}
            height={280}
            onIconClose={cancelBack}
            onClose={cancelBack}
            onConfirm={sendBackData}>
                <div className="modal-option">
                    <span className="option-name">是否开启数据备份:</span>
                    <LgSwitch checked={editBackData.beTurn==="1"||editBackData.beTurn===true?true:false} onClick={()=>operateBackData("beTurn", editBackData.beTurn==="1"||editBackData.beTurn===true? false: true)} />
                </div>
                <div className="modal-option">
                    <span className="option-name">数据备份频率:</span>
                    <span className="option-value">
                        每隔
                        <input 
                        type='text'
                        value={editBackData.frequency}
                        onChange={(e)=>operateBackData("frequency", e.target.value)} />
                        天备份
                    </span>
                </div>
                <p className="back-tip">当前凌晨3点开始，{backData.frequency}天后进行数据备份。</p>
        </LgPopLayer> */}
        </Spin>
        </>
        
    )
}
const mapToProps = (state) => {
    return {
        sysAddrInfo: state.sysAddrInfo,
        userInfo: state.userInfo,
        getTextById: state.getTextById,
        alertInfo: state.alertInfo
    }
}
export default connect(mapToProps)(BackupsReduction);